<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialog"
    :title="bindPageTitle"
    :close-on-click-modal="false"
    width="700px"
    append-to-body
    @close="cancel"
  >
    <div>
      <div>
        <el-table
          ref="wmBrandTab"
          :data="parent.mappingList"
          stripe
          size="small"
          border
          style="width: 100%;"
        >
          <el-table-column :show-overflow-tooltip="true" label="序号" type="index" width="55" />
          <el-table-column :show-overflow-tooltip="true" label="沃尔玛品牌号" prop="wmBrandId" />
          <el-table-column :show-overflow-tooltip="true" label="沃尔玛品牌名称" prop="wmBrandName" />
        </el-table>
      </div>
      <div style="margin-top: 20px">
        <el-form class="searchform" :model="{}" :inline="true" size="mini" label-width="150px">
          <div v-for="item in channelOptions" :key="item.channelId">
            <el-form-item :label="item.channelName">
              <el-select
                v-model="item.channelBrandId"
                filterable
                remote
                :remote-method="remoteChannelBrand"
                no-data-text="无对应品牌信息"
                placeholder="输入搜索"
                size="mini"
                style="width: 450px"
                clearable
                @focus="focusSelect(item)"
                @change="doChange"
              >
                <el-option v-for="item1 in item.brandOptions" :key="item1.channelBrandId" :label="item1.channelBrandName" :value="item1.channelBrandId" />
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="text" @click="cancel">取消</el-button>
      <el-button size="mini" type="primary" @click="doSubmit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { batchSave, queryChannelBrandList } from '@/api/coi/mapping/brand'
import { messageShowTool } from '@/utils/messageUtil'

export default {
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      channelOptions: [],
      searchRow: {},
      bindPageTitle: ''
    }
  },
  methods: {
    messageShowTool,
    cancel() {
      this.dialog = false
    },
    focusSelect(row) {
      this.searchRow = row
    },
    doChange(val) {
      this.$forceUpdate()
    },
    // 整理待提交数据列表
    arrangeDataList() {
      const toSubmitDataList = []
      const _this = this
      _this.parent.mappingList.forEach(item => {
        _this.channelOptions.forEach(channelBrand => {
          const obj = {}
          obj.wmBrandId = item.wmBrandId
          obj.wmBrandName = item.wmBrandName
          obj.channelId = channelBrand.channelId
          if (channelBrand.channelBrandId) {
            obj.channelBrandId = channelBrand.channelBrandId
          }
          toSubmitDataList.push(obj)
        })
      })
      return toSubmitDataList
    },
    // 搜索渠道品牌
    remoteChannelBrand(param) {
      var _this = this
      if (param !== '') {
        queryChannelBrandList({ channelBrandName: param, channelId: this.searchRow.channelId }).then(res => {
          if (res && res.result && res.result.list) {
            const channelBrandList = res.result.list
            _this.$set(this.searchRow, 'brandOptions', channelBrandList)
            _this.$forceUpdate()
          }
        })
      }
    },
    // 提交
    doSubmit() {
      this.loading = true
      const toSubmitDataList = this.arrangeDataList()
      batchSave(toSubmitDataList).then(_ => {
        this.messageShowTool('操作成功。', 'success')
        this.loading = false
        this.dialog = false
        this.parent.toQuery()
      }, _error => {
        this.loading = false
        console.log(_error)
      })
    }
  }
}
</script>

